<template>
  <nut-navbar :title="title" ></nut-navbar>
  <div style="height: 100vh;">

    <div v-for="(main, ind) in menuList" :key="ind" style="padding: 5px;border-radius: 4px;">
      <nut-grid :column-num="3" >
        <nut-grid-item v-for="(item, index) in main.list" :key="index" @click="goPage(item)">
          <div>
            <div class="menu-item" :style="{color:item.color}">
              <nut-image width="25" height="25" :src="item.src" style="margin: 0 auto;" />
            </div>
            <div class="title tc">
              {{item.title }}
            </div>
          </div>
        </nut-grid-item>
      </nut-grid>
    </div>
  </div>
</template>
<script setup>
// defineOptions({
//   name: 'TemplateAllocation'
// })
import tool from "@/utils/tool";
import {onBeforeMount, ref} from "vue";
import {useRouter} from "vue-router";
const router = useRouter()
const title = ref('')
const menuList = ref({})
onBeforeMount(() => {
  tool.post('menu/getAppMenu', {}, true).then(ret => {
    if(ret.stat) {
      menuList.value = ret.data
    }
  })
  let usr = tool.data.getUser()
  title.value = usr.tenantName
})
const goPage = (route) => {
  router.push({name: route.route})
}

</script>
<style lang="scss" scoped>

.menu-item {
  background: #F2F2F2;
  width: 50px;
  padding: 15px 2px;
  text-align: center;
  border-radius: 8px;
  i {
    font-size: 22px;
  }
  &:active {
  }
}
.title {
  //background: #1cbbb4;
  padding-top: 5px;
  font-size: 13px;
}
</style>
